<template>
    <div class="personage">
        <!-- 搜索 -->
        <div class="nav">
            <div class="nav_box">
                <router-link to="/home/index" class="router-link-active">首页</router-link>
                <el-icon color="#999" class="icoo">
                    <DArrowRight />
                </el-icon>
                <router-link to="/home/exam/exam/pai" class="router-link-active">一站到底</router-link>
                <el-icon color="#999">
                    <DArrowRight />
                </el-icon>
                <router-link :to="link" class="router-link-active">{{
                    name
                }}</router-link>
            </div>
        </div>
        <el-container>
            <el-aside>
                <div class="title" @click="zkclick">
                    <img src="@/assets/queen.png" alt="" class="ico_1">
                    <div class="tet">一站到底</div>
                    <el-icon color="#e02020" class="ico_2" v-if="zk">
                        <ArrowUp />
                    </el-icon>
                    <el-icon color="#e02020" class="ico_2" v-else>
                        <ArrowDown />
                    </el-icon>
                </div>
                <div v-if="zk" :class="{ menuitem: true, t_item: $route.path === item.link }" v-for="(item, i) in list"
                    :key="i" exact @click="citem(i)" class="t_item1">
                    <router-link :to="item.link" class="rou">
                        {{ item.name }}
                    </router-link>
                </div>
            </el-aside>
            <el-main>
                <RouterView></RouterView>
            </el-main>
        </el-container>
    </div>
</template>

<script setup lang="ts">
import { ref } from 'vue'
import { useRouter } from 'vue-router'
let Router = useRouter()
const list = ref([
    { name: '答题排行榜', link: '/home/exam/exam/pai' },
    { name: '党建知识练习', link: '/home/exam/exam/lian' },
    { name: '党建知识测评', link: '/home/exam/exam/ceping' },
    { name: '我的测评记录', link: '/home/exam/exam/jilu' },
])
const myitem = ref(0)
const link = ref('/home/exam/exam/pai')
const name = ref('答题排行榜')
const citem = (ev: number) => {
    myitem.value = ev
    link.value = list.value[ev].link
    name.value = list.value[ev].name
    Router.push(link.value)
    // console.log(link.value)
    // console.log(ev, myitem.value)
}
// 展开
const zk = ref(true)
const zkclick = () => {
    zk.value = !zk.value
}
</script>

<style lang="scss" scoped>
.el-container {
    .el-aside {
        width: 232px;
        background-color: #fff;
        margin: 0 16px;

        .t_item {
            margin: 4px auto;
            width: 216px;
            height: 36px;
            line-height: 36px;
            font-size: 14px;
            border-radius: 2px;
            background: rgba(224, 32, 32, 0.1);
            cursor: pointer;

            .rou {
                color: #e02020 !important;
                margin-left: 44px;
                text-decoration: none;
            }
        }

        .t_item1 {
            margin: 4px auto;
            width: 216px;
            height: 36px;
            line-height: 36px;
            font-size: 14px;
            cursor: pointer;

            .rou {
                color: rgba(0, 0, 0, 0.6);
                text-decoration: none;
                margin-left: 44px;
            }
        }

        .title {
            display: flex;
            width: 216px;
            height: 36px;
            line-height: 36px;
            margin: 16px 8px 0;
            cursor: pointer;

            .ico_1 {
                margin: 10px 8px 0 20px;
                // font-size: 15px;
                width: 18px;
                height: 18px;
            }

            .ico_2 {
                font-size: 15px;
                margin: 10px 8px 0 80px;
            }

            .tet {
                font-size: 14px;
                color: #e02020;
            }
        }
    }

    .el-main {
        width: 816px;
        height: 1200px;
        overflow: hidden;
        background: #fff;
    }
}

.routerl {
    margin: 4px auto;
    width: 216px;
    height: 36px;
    line-height: 36px;
    color: rgba(0, 0, 0, 0.6);
    font-size: 14px;
    cursor: pointer;
}

.nav {
    height: 54px;
    line-height: 54px;
    background-color: #fff;
    margin-bottom: 16px;

    .nav_box {
        margin-left: 44px;
        font-size: 16px;
        color: #999999;

        .router-link-active {
            font-size: 16px;
            color: #999999 !important;
            text-decoration: none;
        }

        .el-icon {
            margin: 15px 10px 0 10px;
        }
    }
}

// @media (min-width: 2160px) {
//     .personage {
//         width: 100%;
//         margin: 0 auto;
//         height: 1200px;
//         background: #f0f0f0;
//     }
// }

// @media (max-width: 2159px) {
.personage {
    width: 1080px;
    margin: 0 auto;
    background: #f0f0f0;
}

// }
</style>
